<template>
    <div class="form">
        <el-form :model="formData" status-icon :rules="formRules" ref="formRef" :show-message="false">
            <el-form-item prop="accountSet">
                <el-input v-model.trim="formData.accountSet" clearable placeholder="账套名" @keyup.enter.native="enterKey($event, 'M1')"></el-input>
            </el-form-item>
            <el-form-item prop="username">
                <el-input v-model.trim="formData.username" ref="M1" clearable placeholder="用户名" @keyup.enter.native="enterKey($event, 'M2')"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="none">
                <el-input type="password" v-model.trim="formData.password" ref="M2" clearable placeholder="密码" @keyup.enter.native="save('formRef')"></el-input>
            </el-form-item>
            <el-form-item class="none">
                <el-checkbox v-model="isRemember">
                    <span style="color: #666;">记住账套名</span>
                </el-checkbox>
                <span class="right forgotText" @click="$store.commit('loginStore/updateStatus', 7)">忘记账套？</span>
                <span class="right forgotText" @click="$store.commit('loginStore/updateStatus', 6)">忘记密码？</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save('formRef')">账套登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {},
            formRules: {
                accountSet: [{required: true, triggle: 'blur'}],
                username: [{required: true, triggle: 'blur'}],
                password: [{required: true, triggle: 'blur'}]
            },
            isRemember: true,
        }
    },
    methods: {
        save(formName) {        //账套登录
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //后台校验
                    this.$http({
                        method: 'post',
                        url:  'login/loginUser',
                        params: this.formData
                    }).then(res => {
                        if(res.data.code == 20001) {
                            this.$notify({message: '登录成功', type: 'success', duration: '1500', offset: 30});
                            //存储登录信息
                            sessionStorage.setItem('isLogin', JSON.stringify(res.data.data));
                            if(this.isRemember) {
                                let uInfo = JSON.parse(localStorage.getItem('uInfo'));
                                if(uInfo) {
                                    uInfo['accountSet'] = this.formData['accountSet'];
                                    localStorage.setItem('uInfo', JSON.stringify(uInfo));
                                } else {
                                    //不存在时，创建uInfo对象
                                    localStorage.setItem('uInfo', JSON.stringify({username: this.formData['accountSet']}));
                                }
                            } else {
                                let uInfo = JSON.parse(localStorage.getItem('uInfo'));
                                if(uInfo) {
                                    delete uInfo['accountSet'];
                                    if(JSON.stringify(uInfo) == '{}') {
                                        localStorage.removeItem('uInfo');
                                    } else {
                                        localStorage.setItem('uInfo', JSON.stringify(uInfo));
                                    }
                                } else {
                                    localStorage.removeItem('uInfo');
                                }
                            }
                            setTimeout(() => {
                                this.$router.push('/');     //跳转到首页
                            }, 1000);
                        } else {
                            this.$notify({message: res.data.msg || '登录信息有误', type: 'error', duration: '1500', offset: 30});
                        }
                    });
                }
            });
        },
        enterKey(lastRef, nextRef) {        //回车键换行
            if(lastRef.target.value) {
                this.$refs[nextRef].focus();
            }
        }
    },
    created() {
        let uInfo = JSON.parse(localStorage.getItem('uInfo'));
        if(uInfo && uInfo['accountSet']) {
            this.formData['accountSet'] = uInfo['accountSet'];
        }
    }
}
</script>
<style scoped>
    .form {padding-bottom: 5px;}
</style>